import React, { Component } from 'react'
import { TextInput, StyleSheet, View, Button, Dimensions } from 'react-native'

export default class TextInputDemo extends Component {
  constructor() {
    super()
    this.state = {
      content: ''
    }
  }

  getContent = () => {
    alert(this.state.content)
  }

  render() {
    return (
      <View style={[styles.container]}>
        <TextInput
          placeholder="请输入内容"
          value={this.state.content}
          style={[styles.input]}
          onChangeText={(e) => {
            this.setState({
              content: e
            })
          }}
        />

        <View style={[styles.btn]}>
          <Button title="获取内容" onPress={this.getContent} />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    width: Dimensions.get('window').width - 40,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'red',
    margin: 20
  },
  btn: {
    width: Dimensions.get('window').width - 40,
    margin: 20
  }
})
